<template>
  <div class="v-flex v-flex-wrap v-fill-size">
    <div
      v-for="icon of icons"
      class="icon-wrapper v-radius v-flex v-m-r v-m-l v-m-b v-m-t"
      @click="onCopy(icon)"
    >
      <div class="v-icon-inner v-shadow v-radius v-flex" v-ripple>
        <v-icon :icon="icon" class="v-m-b" width="4em" height="4em" />
        <span>{{ icon }}</span>
      </div>
      <div v-ripple class="icon-utils v-flex v-justify-center">
        <v-icon icon="icon-fuzhi1" />
        <p class="v-txt-center">Hey man~</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, Ref, inject, defineComponent } from 'vue';
import { IMessage } from '@/interface/IUse';
import VIcon from '@/components/Icon.vue';

export default defineComponent({
  name: 'IconStatic',
  components: {
    VIcon
  },
  setup() {
    const $message: IMessage = inject('message') as IMessage;
    const g_bg = inject('$bg');
    const icons = ref(['icon-lianjie', 'icon-lianjie1', 'icon-lianjie_', 'icon-lianjie2', 'icon-lianjie3', 'icon-youqinglianjie', 'icon-lianjie4', 'icon-caidan1', 'icon-drxx11', 'icon-caidan', 'icon-caidanguanli', 'icon-fangda', 'icon-icon_A', 'icon-jiazai1', 'icon-jiazaizhong', 'icon-jiazaizhong1', 'icon-jiazailoading-A', 'icon-icon-', 'icon-jiazai_shuang_o', 'icon-shangjiantou', 'icon-right-circle-fill', 'icon-left-circle-fill', 'icon-xiajiantou', 'icon-search', 'icon-sousuo-tianchong', 'icon-xinxi3', 'icon-xianshi_jinggaotianchong', 'icon-shibai', 'icon-chenggong']);

    const copyInput = ref(null) as any as Ref<HTMLInputElement>;


    const onCopy = async (icon: string) => {
      // 写入粘贴板
      await navigator.clipboard.writeText(icon);
      // 读取粘贴板
      await navigator.clipboard.readText();

      $message({
        type: 'success',
        content: `复制成功: ${icon}`
      });
    }
    
    return {
      $message,
      g_bg,
      icons,
      copyInput,
      onCopy
    }

  }
})

</script>

<style scoped>
.v-icon-inner {
  width: 100%;
  height: 120px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  transition: margin-bottom 0.3s cubic-bezier(0.34, 1.61, 0.7, 1);
  cursor: pointer;
  background-color: v-bind(g_bg);
  flex-direction: column;
  overflow: auto;
  justify-content: center;
}

.v-fill-size {
  overflow: auto;
  padding-bottom: 50px;
}
.icon-utils {
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  cursor: pointer;
}
.icon-wrapper {
  width: 200px;
  height: 140px;
  flex-direction: column;
  position: relative;
}
.icon-wrapper:hover .v-icon-inner {
  margin-bottom: 20px;
}
</style>